<template>
  <div class="yxp-course" @click="bodyClick('body')">
    <div class="yxp-composition-top">
      <div class="back" id="yxp-keep-back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">语音流畅性训练</div>
      <div class="yxp-top-r">
        <template v-for="(item,i) in modelArr">
          <span class="right-text-item"  v-if="!isControl" :class="{active: model === i}" :key="'n' + i" @click="handleChangeModel(i)">{{item}}</span>
        </template>
      </div>
    </div>
    <div class="yxp-scene-main">
      <div class="main-box">

        <div class="main-box-item">
          <div class="listen-item" ref="readyPoint">
              <span></span>
              <span></span>
              <span></span>
          </div>
          <div class="content">
            <div class="content-wrap retell-box keep-box scrolToMinView" v-if="!isReset && !isStart && !isControl">
              <template>
                <template v-if="articleType === 1 || articleType === 5">
                  <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word" @click="handleSelect(item,i)"></span>
                  <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                </template>
                <template v-else-if="articleType === 2">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word" @click="handleSelect(item,i)"></span>
                  <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                </template>
                <template v-else-if="articleType === 3">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word" @click="handleSelect(item,i)"></span>
                </template>
                <template v-else-if="articleType === 4">
                  <span v-html="enHead" :style="{display: 'block',color: '#333'}"></span>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word" @click="handleSelect(item,i)"></span>
                </template>
                <template v-else>
                  <span class="section" v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{active: item.isRead,read: item.isNum > 0 && !item.isRead}"  v-html="item.word" @click="handleSelect(item,i)"></span>
                </template>
              </template>
            </div>
            <!-- <div class="retell-wrap-scroll"> -->
                 <div class="content-wrap retell-box retell-wrap scrolToMinView"  v-if="!isReset && !isStart && isControl">
                  <template>
                    <template v-if="articleType === 1 || articleType === 5">
                      <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                      <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color:'#333'}"></span>
                    </template>
                    <template v-else-if="articleType === 2">
                      <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                      <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                    </template>
                    <template v-else-if="articleType === 3">
                      <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                    </template>
                    <template v-else-if="articleType === 4">
                      <span v-html="enHead" :style="{display: 'block',color: '#333'}"></span>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                    </template>
                    <template v-else>
                      <span v-for="(item,i) in enText" :key="'e' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" v-html="item.word" style="color: #333"></span>
                    </template>
                  </template>
                </div>
            <!-- </div> -->
            <div class="content-wrap retell-box read-box retell-wrap scrolToMinView" v-show="isReset && model === 1">
              <template v-if="!isControl">
                <template v-if="articleType === 1 || articleType === 5">
                  <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}" v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                  <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                </template>
                <template v-else-if="articleType === 2">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}" v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                  <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
                </template>
                <template v-else-if="articleType === 3">
                  <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}" v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                </template>
                <template v-else-if="articleType === 4">
                  <span v-html="enHead" :style="{display: 'block',color: '#333'}"></span>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}"  v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                </template>
                <template v-else>
                  <template v-for="(item,i) in enText">
                    <span class="section" :key="'s' + i" :style="{'margin-left': item.isStart ? '40px' : 0}" :class="{on: readIow === i}" v-html="item.word" @click="handlePlay(i)"></span>
                  </template>
                </template>
              </template>
            </div>
            <div class="content-wrap retell-box read-box retell-wrap scrolToMinView" v-show="isReset && model === 0">
              <template v-if="!isControl">
              <template v-if="articleType === 1 || articleType === 5 || articleType === 4">
                <span v-html="enHead"  :style="{display: 'block',color: '#333'}"></span>
              </template>
              <template v-if="articleType === 2 || articleType === 3">
                <span v-html="enHead"  :style="{display: 'block','text-align': 'center',color: '#333'}"></span>
              </template>
              <!-- <template v-for="(item,i) in wordList">
                <div :key="'s' + i" class="section">
                  <a-popover
                    v-for="(n,k) in item.data" :key="'t' + k"  :style="{'margin-left': n.start === 1 ? '40px' : 0}"
                    :visible="visibleKey === `${i}-${k}`"
                    overlayClassName="lookup-popover"
                    placement="bottom"
                    :destroyTooltipOnHide="true"
                    trigger="click"
                  >
                    <span v-html="n.name" class="words" @click.stop="handleTranslates($event,n.name,i,k,`${i}-${k}`)"></span>
                    <div slot="content">
                      <div class="lookup-content">
                        <div class="title">
                          {{ prototype_word || select_word }}
                          <img
                            v-show="prototype_word"
                            class="icon-img"
                            @click="handlePlay"
                            src="~assets/reverse/audio-play1.png"
                            alt=""
                          />
                        </div>
                        <div class="translate">
                          {{ translates || "未找到该生词" }}
                        </div>
                        <div class="btn-group">
                          <a :disabled="!prototype_word" @click="handleAdd()"
                            ><img
                              class="icon-img"
                              src="~assets/reverse/add1.png"
                              alt=""
                            />添加生词</a
                          >
                          <a @click="handleDetail"
                            ><img
                              class="icon-img"
                              src="~assets/reverse/detail1.png"
                              alt=""
                            />单词详解</a
                          >
                        </div>
                      </div>
                    </div>
                  </a-popover>
                </div>
              </template> -->
              <!-- <template v-for="(item,i) in wordList"> -->
                <div class="sections">
                  <a-popover
                    transitionName=""
                    v-for="(n,k) in search" :key="'t' + k"
                    :visible="visibleKey === `${k}`"
                    overlayClassName="lookup-popover"
                    placement="bottom"
                    :destroyTooltipOnHide="true"
                    trigger="click"
                  >
                    <span v-html="n.word" class="words" @click.stop="handleTranslates($event,n.word,k,`${k}`)" :style="{'margin-left': n.isStart === 1 ? '39px' : 0}"></span>
                    <div slot="content">
                      <div class="lookup-content">
                        <div class="title">
                          {{ prototype_word || select_word }}
                          <img
                            v-show="prototype_word"
                            class="icon-img"
                            @click="handlePlay"
                            src="~assets/reverse/audio-play1.png"
                            alt=""
                          />
                        </div>
                        <div class="translate">
                          {{ translates || "未找到该生词" }}
                        </div>
                        <div class="btn-group">
                          <a :disabled="!prototype_word" @click="handleAdd()"
                            ><img
                              class="icon-img"
                              src="~assets/reverse/add1.png"
                              alt=""
                            />添加生词</a
                          >
                          <a @click="handleDetail"
                            ><img
                              class="icon-img"
                              src="~assets/reverse/detail1.png"
                              alt=""
                            />单词详解</a
                          >
                        </div>
                      </div>
                    </div>
                  </a-popover>
                </div>
              <!-- </template> -->
              <template v-if="articleType === 1 || articleType === 5 || articleType === 2">
                <span v-html="enEnd" :style="{float: 'right',overflow: 'hidden',color: '#333'}"></span>
              </template>
              </template>
            </div>
            <div class="content-wrap listen" v-if="isStart">
              <div class="listen-box">
                <img src="@/assets/composition/listen-icon.png" class="listen-icon" />
                <p class="tips">认真听读音</p>
              </div>
            </div>
            <div class="record" v-if="isPlay || isReset">
              <img src="@/assets/composition/record-play.png" class="play-icon" v-if="!isReset && isPlay && !playing" @click="playVoice('play')"/>
              <img src="@/assets/composition/pause-icon.png" class="play-icon" v-if="!isReset && isPlay && playing" @click="playVoice('pause')"/>
              <div class="record-item" v-if="isReset" @click="handleBackContent">返回</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="scene">
     <div class="scene-btn" :style="{'justify-content': isControl ? 'space-between' : 'center'}">
        <div class="scene-btn-item" v-if="isControl">
          <span class="ms">{{ seekDuration | mmssFilter }}</span>
          <a-slider  class="voice-range" :value="sliderPercentage"></a-slider>
          <span class="ms">{{ audioDuration | mmssFilter }}</span>
        </div>
        <div class="scene-btn-item" v-if="isControl">
          <span class="num col">{{overNum}}</span>
          <span class="control col" :class="{ on: playSpeed == 1 }" @click.stop="changeRate(1)">变频1</span>
          <span class="control col" :class="{ on: playSpeed == 2 }" @click.stop="changeRate(2)">变频2</span>
          <span class="control col" :class="{ on: playSpeed == 3 }" @click.stop="changeRate(3)">变频3</span>
        </div>
        <div class="scene-btn-item" v-if="!isPlay && !isStart" @click="handleScene">
          <span class="text">遮挡复述</span>
          <img src="@/assets/word/no-next.png" v-if="readArr.length === enText.length && model === -1"/>
        </div>
        <div class="scene-btn-item flex-center"  v-if="isPlay"  @click="handleNext">
          <span class="text" v-if="!isStart">变频跟读</span>
          <span class="text" v-if="isStart">盲听训练</span>
          <img src="@/assets/word/no-next.png"/>
        </div>
      </div>
    </div>
    <div class="mark" v-if="isDetail || isEn"></div>
    <Translates v-if="word !== ''" :isDetail="isDetail" :word="word" @translate="handleCloseDetail"/>
    <ScenePop :title="popTitle" :isEn="isEn" type="5" :id="id" :courseId="courseId"  @closePop="handleClosePop" />
    <BackTips title="是否退出学习？" :isBack="isBack" :courseId="courseId" :courseType="course_type" type="1" @close="handleClosed"/>
    <audio :src="project_voice" ref="audioWord" />
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
// import ScenePop from '../components/ScenePop.vue'
import { Slider } from "ant-design-vue"
import { Popover } from "ant-design-vue"
import Translates from '@/components/Translates.vue'
import ScenePop from '../components/ScenePop.vue'
import BackTips from '../components/BackTips.vue'
import Timetips from '@/components/Timetips.vue'
import storage from '@/utils/storage.js'
import { addWord, searchWord } from '@/services/composition.js'
import { Howl } from "howler"
import { mapMutations } from "vuex";
import $ from 'jquery'
export default {
  name: 'keepOut',
  components: {
    Translates,
    ASlider: Slider,
    ScenePop,
    BackTips,
    APopover: Popover,
    Timetips
  },
  data () {
    return {
      title: '格式塔情景植入',
      popTitle: '开始语音评测吧~',
      isEn: false,
      modelArr: ['查词模式','句子模式'],
      content: '',
      enText: [],
      wordList: [],
      enVoice: '',
      voiceArr: [],
      enWord: '',
      courseId: 0,
      id: 0,
      course_type: 0,
      model: -1,
      iNow: -1,
      iStep: -1,
      readArr: [],
      curIndex: -1,
      readIow: -1,
      isBack: false,
      isReset: false,
      isPlay: false,
      isStart: false,
      translates: '',
      project_voice: '',
      prototype_word: '',
      select_word: '',
      isDetail: false,
      word: '',
      isControl: false, // 变频样式
      audioSrc: '',
      audio: {},
      playing: false,
      audioDuration: 0,
      seekDuration: 0,
      seekTimer: null,
      readyTimer: null,
      playCurrentNum1: 0, // 当前播放次数 变频单独次数
      playCurrentNum2: 0, // 当前播放次数
      playCurrentNum3: 0, // 当前播放次数
      playSpeed: 1,
      voice_rate: [],
      articleType: 0,
      enHead: '',
      enEnd: '',
      index: 0, // 查词第几句
      wordIndex: 0, // 查词第几个词
      detail: false,
      activeWord: '',
      visibleKey: -1,
      search: []
    }
  },
  computed: {
    sliderPercentage: function() {
      return this.seekDuration < 1 ? 0 : Math.ceil((this.seekDuration / this.audioDuration) * 93)+7;
    },
    overNum: function() {
      return this.voice_rate.length - this[`playCurrentNum${this.playSpeed}`];
    }
  },
  created () {
    if (this.$route.query.id) {
      let { courseId, id, course_type } = this.$route.query
      this.courseId = +courseId
      this.id = +id
      this.course_type = +course_type
    }
    let data = storage.get('sceneData')
    if (data) {
      this.content = data
      this.enVoice = data.single_voice
      this.project_voice = data.en_voice
      this.voiceArr = data.single_voice
      this.voice_rate = this.content[`voice_rate_${this.playSpeed}`]
      this.articleType = data.type
      let enText = data.sentence
      if (this.articleType === 1 || this.articleType === 5 || this.articleType === 2) {
        this.enHead = enText.splice(0,1).join('').replace('##','')
        this.enEnd = enText.pop()
        if (this.enEnd.indexOf('##')) {
          this.enEnd = this.enEnd.replace('##','<br/>')
        }
        this.voiceArr.splice(0,1)
        this.voiceArr.pop()
      } else if (this.articleType === 3 || this.articleType === 4) {
        this.enHead = enText.splice(0,1).join('').replace('##','')
        this.voiceArr.splice(0,1)
      }
      let search = []
      enText.map(item => {
        let word = item.split(' ')
        word.map(elem => {
          let obj = {}
          if (elem.indexOf('&&') !== -1) {
            elem = elem.replace('&&','')
            obj.isStart = 1
            obj.word = elem + ' '
            search.push(obj)
          } else if (elem.indexOf('##') !== -1) {
            obj.isStart = 0
            elem = elem.replace('##','<span style="display:block"></span>')
            obj.word = elem + ' '
            search.push(obj)
          } else {
            obj.isStart = 0
            obj.word = elem + ' '
            search.push(obj)
          }
        })
      })
      this.search = search
      let enArr = []
      // let wordArr = []
      enText.map(item => {
        item = item.replace(/\.(\s*)/, '.')
        let obj = {}
        // let obj1 = {}
        // let wordList = []
        let val = ''
        let val2 = ''
        if (item.indexOf('&&') !== -1 && item.indexOf('##') !== -1) {
          let val1 = item.replace('&&', '')
          val2 = item
          console.log(val1)
          val = val1.replace('##','<br>')
          obj.word = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          enArr.push(obj)
        } else if (item.indexOf('&&') !== -1) {
          val = item.replace('&&', '')
          val2 = item
          obj.word = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          enArr.push(obj)
        } else if (item.indexOf('##') !== -1) {
          console.log(item)
          val2 = item
          val = item.replace('##','<br>')
          obj.word = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          enArr.push(obj)
        } else {
          val = item
          val2 = item
          obj.word = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          enArr.push(obj)
        }
        // let word = val2.split(' ')
        // let start = ''
        // let end = ''
        // word.map((elem,i) => {
        //   let node = elem
        //   let child = {}
        //   if (elem.indexOf('&&') !== -1) {
        //     child.start = 1
        //     node = elem.replace('&&','')
        //   } else if (elem.indexOf('##') !== -1) {
        //     node = elem.replace('##','<br>')
        //   } else {
        //     node = elem
        //   }
        //   if (i < word.length - 1) {
        //     child.name = node + ' '
        //   } else {
        //     child.name = node
        //   }
        //   child.isShow = false
        //   wordList.push(child)
        // })
        // obj1.start = start
        // obj1.end = end
        // obj1.data = wordList
        // wordArr.push(obj1)
      })
      // console.log(wordArr)
      this.enText = enArr
      // this.wordList = wordArr
      // console.log('wordArr----', wordArr)
    }
    

    //  this.listenerFunction();
    document.addEventListener('scroll', this.bodyClick, true)
    
  },
  beforeDestroy() {
    this.audio.pause()
    document.removeEventListener('scroll', this.bodyClick, true)
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  mounted() {
    let vm = this;
    this.audio = new Howl({
      src: this.project_voice,
      html5: true,
      tooltip: false,
      onplay: function() {
        //sound playing
        vm.playing = true;
        vm.seekTimer = setInterval(() => {
          vm.audioDuration = this.duration();
          vm.seekDuration = this.seek();
        }, 1000);
      },
      onload: function() {
        vm.audioDuration = this.duration();
      },
      onpause: function() {
        vm.playing = false;
      },
      onend: function() {
        console.log("end");
        vm.playing = false;
        vm[`playCurrentNum${vm.playSpeed}`] += 1;
        // 暂时排查不出问题，end 时候先手动set 为 100%
        if (vm[`playCurrentNum${vm.playSpeed}`] === 3) {
          vm.$refs.readyPoint.style.display = "none"
          return
        }
        vm.seekDuration = this.duration();
        clearInterval(vm.seekTimer);
        vm.$nextTick(() => {
          vm.playVoice("play");
        });
      },
    });
    // document.getElementById("app").addEventListener("click",this.resetWord, true);
  },
  // beforeDestroy () {
  //   this.audio.pause()
  //    document.removeEventListener("scroll", this.listenerFunction);
  //    document.getElementById("app").removeEventListener("click",this.resetWord);
  // },
  methods: {
    // listenerFunction() {
    //     document.addEventListener('scroll', this.handleScroll, true);
    // },
    // handleScroll() {
    //   this.resetWord()
    // },
    // resetWord() {

    //   if(this.wordList && this.wordList.length > 0) {
    //     let __wordList = JSON.parse(JSON.stringify(this.wordList))
    //     __wordList.map(item=>{
    //       if(!!item.data && item.data.length > 0) {
    //         item.data.map(itemSub=>{
    //           itemSub['isShow'] = false
    //         })
    //       }
    //     })
    //     this.wordList = __wordList
    //   }
      
    // },
    ...mapMutations(["setTranslateModal"]),
    bodyClick(e) {
      if (e === 'body') {
        this.visibleKey = -1
      }
      if (!window[`bs:event:scroll:close`]) {
        console.log('--------------   close pop')
        this.visibleKey = -1
      }
    },
   handleSelect (item,i) {
     console.log(this.readArr)
     this.curIndex = i
     if (!item.isRead) {
       if (i > this.iStep + 1) {
         this.$toast('此句还未解锁')
         return
       }
       if (this.readArr.indexOf(i) === -1) {
          this.readArr.push(i)
       }
       if (item.isNum === 0) {
          //  item.isNum++
          this.iStep++
          this.iNow = this.iStep
          let obj = this.enText[this.iNow]
          this.$set(obj, 'isRead', true)
          this.$set(obj, 'isNum', 1)
        } else {
          this.iNow = i
          let obj = this.enText[this.iNow]
          this.$set(obj, 'isRead', true)
        }
      
     } else {
       this.iNow = i
       let obj = this.enText[this.iNow]
       this.$set(obj, 'isRead', false)
     }
   },
   async playVoice(status) {
      if (this[`playCurrentNum${this.playSpeed}`] === 3) {
        this[`playCurrentNum${this.playSpeed}`] = 0
      }
      let playCurrent = this.voice_rate[this[`playCurrentNum${this.playSpeed}`]]
      if (status === "play" || status === "autoPlay") {
        await this.readyFun();
        this.audio.rate(playCurrent.speed);
        this.audio.play();
      } else {
        this.audio.pause();
      }
    },
  readyFun() {
      let time = 0;
      if (this.readyTimer) {
        clearInterval(this.readyTimer);
      }
      this.$refs.readyPoint.style.display = "block";
      let points = this.$refs.readyPoint.children;
      points[0].style.visibility = "visible";
      points[2].style.visibility = "visible";
      points[1].style.visibility = "visible";
      // ============英文显示逻辑先放这吧=============
      if (this.playSpeed === 2) {
        if (this.playCurrentNum2 === 1) {
          this.isStart = true
        } else {
          this.isStart = false
        }
      }
      if (this.playSpeed === 3) {
        this.isStart = true
      }
      // =========================
      return new Promise((rev) => {
        this.readyTimer = setInterval(() => {
          time += 200;
          let totalReadyTime =
            this.voice_rate[this[`playCurrentNum${this.playSpeed}`]].time *
            1000;
          if (time >= totalReadyTime * (1 / 3)) {
            points[2].style.visibility = "hidden";
          }
          if (time >= totalReadyTime * (2 / 3)) {
            points[1].style.visibility = "hidden";
          }
          if (time >= totalReadyTime) {
            points[2].style.visibility = "visible";
            points[1].style.visibility = "visible";
            this.$refs.readyPoint.style.display = "none";
          }
          if (time > totalReadyTime) {
            rev(true);
            clearInterval(this.readyTimer);
          }
        }, 200);
      });
    },
   changeRate(rate) {
     this.isStart = false
     this.playing = false
      this.playSpeed = rate
      console.log(this.content)
      this.voice_rate = this.content[`voice_rate_${this.playSpeed}`]
      // 支持多音频播放所以先停掉吧  目前没发现问题
      this.audio.stop();
      this.playVoice("play");
    },
   handlePlay (i) {
     this.readIow = i
     console.log(this.voiceArr[i])
     this.project_voice = this.voiceArr[i]
     setTimeout(() => {
      this.handlePlayWord()
     },10)
   },
   handlePlayWord () {
     let audioWord = this.$refs.audioWord
     audioWord.play()
   },
   handleChangeModel (i) {
      // this.visibleKey = -1
      this.model = i
      this.isReset = true
      this.readIow = -1
      this.detail = false
      if (i === 0) {
        this.$refs.audioWord.pause()
      }
      $(".ant-popover").empty();
      $('.ant-popover-open').removeClass('ant-popover-open')

   },
   async handleTranslates (e,word,k,index) {
     console.log(this.visibleKey)
    //  this.index = i
     this.wordIndex = k
     this.isShow = true
     if (this.visibleKey === index) {
       this.visibleKey = '-1'
       return
     }
     await this.handleSearchWord(e,word,k)
     this.visibleKey = index
    },
   handleWordClose () {
     this.detail = false
     let obj = this.wordList[this.index]
     console.log(obj)
     let data = obj.data
     console.log('this.wordIndex----',this.wordIndex)
     data[this.wordIndex].isShow = false
    //  data.map((item,index) => {
    //   if (index === k) {
    //     console.log(index + '****' + k)
    //     item.isShow = !item.isShow
    //     console.log(item)
    //   }
    //  })
     this.$set(obj, 'data', data)
   },
   async handleSearchWord (e,word,k) {
      // this.visibleKey = '-1'
      let str = word; 
      if (word.indexOf('.') > -1 || word.indexOf('!') > -1 || word.indexOf(',') > -1) {
        str = word.substr(0,word.length - 1)
      }
      let data = await searchWord({ word: str})
      if (data.code === 1) {
        let result = data.data
        this.translates = result.translate
        this.project_voice = result.project_voice
        this.prototype_word = result.prototype_word
        this.select_word = result.select_word
        // let obj = this.wordList[i]
        // let item = obj.data
       
        // if(this.activeWord != word) {
        //     this.activeWord = word
        //     item[k].isShow = true
        // } else {
        //     this.activeWord = '-1'
        //     item[k].isShow =  false
        // }
        // this.$set(obj, 'data', item)
      }else {
        // this.activeWord = '-1'
      }
     
      
    },
    handleAdd (word) {
      console.log(word)
      let params = {
        prototype_word: this.prototype_word,
        select_word: this.prototype_word === '' ? this.select_word : this.prototype_word,
        question_id: this.id,
        is_diff: '0'
      }
      addWord(params).then(res => {
        if (res.code === 1) {
          this.$toast('添加生词成功')
          this.detail = false
          this.enWord.map(item => {
            item.isShow = false
          })
        } else {
          this.$toast(res.info)
        }
      })
    },
    handleDetail () {
      this.setTranslateModal({
        visible: true,
        word: this.select_word,
      });
      document.getElementById("app").click();
    },
   handleScene () {
     if (this.readArr.length < this.enText.length || this.isReset) {
       return
     }
     this.isControl = true
     this.isPlay = true
     this.isReset = false
   },
   handleBack () {
     this.isBack = true
   },
   handleCloseDetail (val) {
      this.isDetail = val.isDetail
      this.word = val.word
    },
    handleClosed (val) {
      this.isBack = val
    },
    handleNext () {
      this.isEn = true
    },
    handleClosePop (val) {
      this.isEn = val
    },
    handleBackContent () {
      this.isReset = false
      this.model = -1
      this.detail = false
      this.$refs.audioWord.pause()
    }
  }
}
</script>
<style lang="less" scoped>
.yxp-composition-top {
    .active {
      color: #27BFA3;
    }
    .yxp-top-r {
      color: #A7A7A7;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      .right-text-item {
        cursor: pointer;
        &:last-child {
          margin-left: 60px;
        }
      }
    }
  }
  .listen-item {
      position: absolute;
      left: 80px;
      top: 30px;
      text-align: center;
      display: none;
      z-index: 10;
        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: #FF8000;
          border-radius: 6px;
          margin-right: 10px;
        }
      }
  .read-box {
    span {
      position: relative;
      color: #333;
    }
  }
  .retell-wrap-scroll {
    overflow: auto;
  }
  .retell-wrap {
    height: calc(100% - 90px) !important;
    padding-bottom: 10px !important;
  }
  .keep-box {
    color: #666 !important;
    padding-bottom: 48px !important;
  }
  .retell-box {
    overflow: auto;
    padding-top: 42px !important;
    padding-right: 75px !important;
    .section {
      margin-right: 5px;
    }
    span {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        // color: #333;
        cursor: pointer;
        word-break: break-word;
        // margin-right: 4px;
        em {
          position: relative;
          margin-right: 6px;
        }
      }
      .on {
        color: #27BFA3!important;
      }
      .active {
        color: #DFE5EA;
        background: #DFE5EA;
      }
      .read {
        color: #333;
      }
  }
   .listen {
      position: relative;
      background: #fff;

      &-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        .listen-icon {
          width: 92px;
          height: 70px;
        }
        .tips {
          font-size:20px;
          font-family:Microsoft YaHei;
          font-weight:400;
          color: #27BFA3;
          margin-top: 26px;
        }
      }
    }

.scene-btn {
    &-item {
      .ms {
        font-size:16px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color: #27BFA3;
      }
      .voice-range {
        width: 180px; /* no */
        margin: 0 10px;
      }
      .num {
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 22px;
        color: #27BFA3;
        border: 1px solid #27BFA3;
        border-radius: 12px;
        margin-right: 20px;
      }
      .col {
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        text-align: center;
      }
      .on {
        color: #fff !important;
        background: #27BFA3;
      }
      .control {
        width: 60px;
        height: 24px;
        line-height: 22px;
        color: #27BFA3;
        border: 1px solid #27BFA3;
        border-radius: 18px;
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .text {
      color: #27BFA3;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      // margin-right: 20px;
    }
    img {
      width: 40px;
      height: 40px;
    }
  }
  .record {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 90px;
      background: #fff;
      opacity: .94;
      .play-icon {
        display: block;
        width: 80px;
        height: 80px;
        margin: 10px auto 0;
        opacity:1;
      }
      &-item {
        width: 130px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size:18px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color: #fff;
        background: #27BFA3;
        border-radius: 100px;
        margin: 20px auto;
        opacity: 1;
      }
    }
.scene-wrap {
  position: fixed;
  left: 0;
  top: 80px;
  width: 100%;
  height: 100%;
  background: url(../../../assets/yxp-bg.png) no-repeat;
  background-size: cover;
  .scene-box {
    display: flex;
    justify-content: center;
    padding: 30px 95px;
  }
  .scene-content {
    position: relative;
    width: 800px;
    height: 600px;
    background: #fff;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
    .listen-item {
      position: absolute;
      left: 80px;
      top: 30px;
      display: none;
        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: #FF8000;
          border-radius: 6px;
          margin-right: 10px;
        }
      }
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .listen {
      position: relative;
      background: #fff;

      &-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        .listen-icon {
          width: 92px;
          height: 70px;
        }
        .tips {
          font-size:20px;
          font-family:Microsoft YaHei;
          font-weight:400;
          color: #27BFA3;
          margin-top: 26px;
        }
      }
    }
    .content {
      position: relative;
      height: 100%;
      overflow: auto;
      text-align: left;
      padding: 50px 80px 160px;


    }

  }
  .flex-center {
    justify-content: center;
  }
  .flex {
    justify-content: space-between !important;
  }



}
/**弹窗 */
  .yxp-scene-pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    height: 500px;
    background: #fff;
    border-radius: 10px;
    padding-left: 50px;
    padding-right: 50px;
    .close {
      position: absolute;
      right: 20px;
      top:20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .title {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333;
      margin-top: 50px;
      img {
        display: inline-block;
        vertical-align: middle;
        width: 32px;
        height: 29px;
        margin-right: 6px;
      }
    }
    .content {
      text-align: left;
      margin-top: 58px;
      .title {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333;
      }
      .detail {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333;
        margin-top: 30px;
      }
    }
    .btn {
      width: 280px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background: #27BFA3;
      border-radius: 100px;
      margin: 40px auto 0;
      cursor: pointer;
    }
  }
  .yxp-scene-audio {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    height: 400px;
    background: #fff;
    border-radius: 10px;
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .btn {
      width: 269px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background: #3BC9A4;
      border-radius: 100px;
      margin: 290px auto 0;
      cursor: pointer;
    }
  }
  .detail {
          position: absolute;
          // left: 50%;
          // top: 140px;
         // transform: translate(-50%,-50%);
          width: 280px;
          height: 163px;
          background: #27BFA3;
          border-radius: 6px;
          padding-left: 20px;
          padding-right:20px;
          z-index: 1000;
          display: none;
          &::after {
            position: absolute;
            left: 50%;
            top: -20px;
            transform: translateX(-50%);
            display: block;
            content: '';
            width: 0;
            height: 0;
            border-top: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 12px solid #27BFA3;
            border-left: 12px solid transparent;
          }
          .word-icon {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 14px;
            height: 14px;
            background: url(../../../assets/composition/word-close-icon.png) no-repeat;
            background-size: 14px 14px;
            cursor: pointer;
          }
          .en {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size:24px;
            font-family:Microsoft YaHei;
            font-weight:bold;
            color: #fff;
            margin-top: 25px;
            img {
              width: 14px;
              height: 11px;
              margin-left: 15px;
            }
          }
          .zh {
            font-size:16px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color: #fff;
            text-align: left;
            margin-top: 10px;
          }
          .btn {
            display: flex;
            justify-content: space-between;
            align-self: center;
            margin-top: 20px;
            .grey {
              color: #60CEB9 !important;
              border-color: #60CEB9 !important;
            }
            &-item {
              width:120px;
              height:33px;
              line-height: 33px;
              font-size:14px;
              font-family:Microsoft YaHei;
              font-weight:400;
              color: #99E2D4;
              border:1px solid rgba(153,226,212,1);
              border-radius:6px;
              img {
                display: inline-block;
                vertical-align: middle;
                width: 16px;
                height: 16px;
                margin-left: 10px;
                margin-right: 10px;
              }
              &:first-child {
                margin-right: 20px;
              }
            }
          }
        }

</style>
